<template>
  <div class="background" ref="backRef">
    <MdPreview :editorId="id" :modelValue="content" :previewTheme="activeTheme" />
    <MdCatalog :editorId="id" :scrollElement="scrollElement" />
    <div class="setting">
      <el-icon @click="changeTheme">
        <Orange />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { Orange } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const backRef = ref()
const content = ref('')
const id = 'preview-only';
const activeTheme = ref('default')
const themes = ['default', 'github', 'vuepress', 'mk-cute', 'smart-blue', 'cyanosis']
const scrollElement = backRef.value;
onMounted(() => {
  content.value = JSON.parse(localStorage.getItem('noteDetail')).content
})
const changeTheme = () => {
  const index = themes.indexOf(activeTheme.value);
  activeTheme.value = themes[(index + 1) % themes.length];
}
</script>
<style lang="less" scoped>
.background {
  width: 100vw;
  height: 100vh;
  padding: 0 5%;
  display: flex;
  color: #333;
  position: relative;

  .setting {
    position: absolute;
    left: 3%;
    top: 3%;
    font-size: 20px;
    z-index: 999;
    background: none;
    -webkit-app-region: no-drag;

    .el-icon {
      cursor: pointer;
      transition: 0.3s;
      color: #303133;
      margin-right: 5px;
      border-radius: 50%;

      &:hover {
        font-size: 21px;
        box-shadow: 0 0 10px #333;
      }
    }
  }
}
</style>
